<template>
  <div class="h-100 f f-col">
    <el-page-header
        @back="goBack"
        :content="this.$store.state.titleName"
        class="f-16 p-20"
      ></el-page-header>
    <div class="h-100 p-b-50 o-y-auto">

    <el-row :gutter="20" class="w-100">
      <el-col :xs="0" :sm="2">&nbsp;</el-col>
      <el-col :xs="24" :sm="22">
          <div class="p-t-50">
            <el-form ref="form" :model="form" label-width="100px">
              <el-form-item label="网站名称">
                <el-input style="max-width:380px;" v-model="form.t1"></el-input>
              </el-form-item>
              <el-form-item label="公司LOGO">
                <div class="f f-wrap">
                <div v-for="(item,index) in form.t2" @click="delectImg1" :key="index" style="width:380px;height:60px;border:1px solid #dedede" class="img-cover o-hide m-0 rel">
                    <img style="cursor:pointer;" :src="item" width="100%" height="100%">
                  </div>
                <div v-if="form.t2.length<1" class="r-10 f j-c a-c c999 c-p o-hide rel" style="width:380px;height:50px;border:1px solid #dedede;"><em>点击上传LOGO<input class="abs w-100 h-100 abs-0 o-0 c-p" type="file" @change="handleFileChange1" /></em></div>
                </div>
				<p class="c999 f-12">提示：为保证最佳展示效果，请上传图片大小为320*50大小并且为png格式的图片</p>
              </el-form-item>
			  
              <el-form-item label="公司形象照">
                <div class="f f-wrap">
                <div v-for="(item,index) in form.t3" @click="delectImg2" :key="index" style="width:380px;height:220px;border:1px solid #dedede" class="img-cover o-hide rel">
                    <img style="cursor:pointer;" :src="item" width="100%" height="100%">
                  </div>
                <div v-if="form.t3.length<1" class="r-10 f j-c a-c c999 c-p o-hide rel" style="width:380px;height:220px;border:1px solid #dedede;"><em>点击上传公司形象照<input class="abs w-100 h-100 abs-0 o-0 c-p" type="file" @change="handleFileChange2"/></em></div>
                </div>
				<p class="c999 f-12">提示：为保证最佳展示效果，请上传图片大小为280*170大小并且为png格式的图片</p>
              </el-form-item>
              <!-- <el-form-item label="400电话">
                <el-input style="max-width:380px;" v-model="form.t4"></el-input>
              </el-form-item> -->
			  <el-form-item label="咨询热线">
			    <div class="f f-wrap">
			    <div v-for="(item,index) in form.t4" @click="delectImg3"  :key="index" style="width:380px;height:60px;border:1px solid #dedede" class="img-cover o-hide m-0 rel">
			        <img style="cursor:pointer;" :src="item" width="100%" height="100%">
			      </div>
			    <div v-if="form.t4.length<1" class="r-10 f j-c a-c c999 c-p o-hide rel" style="width:380px;height:50px;border:1px solid #dedede;"><em>点击上传咨询热线电话<input class="abs w-100 h-100 abs-0 o-0 c-p" type="file" @change="handleFileChange3" /></em></div>
			    </div>
				<p class="c999 f-12">提示：为保证最佳展示效果，请上传图片大小为330*37大小并且为png格式的图片</p>
			  </el-form-item>
			  <el-form-item label="公司简介">
			    <el-input style="width:100%;max-width:1024px;" rows="8" type="textarea" v-model="form.t6"></el-input>
				<p class="c999 f-12">提示：此处公司简介将呈现在首页小卡片上</p>
			  </el-form-item>
			  <el-form-item label="网站底部">
			    <div id="editor" style="width:1024px"></div>
			  </el-form-item>
              
              <el-form-item>
                <el-button type="primary" @click="onSubmit">确认保存</el-button>
              </el-form-item>
            </el-form>
          </div>
      </el-col>
    </el-row>

    </div>


  </div>
</template>

<script>
import E from "wangeditor";
import { queryCompany, saveCompany } from "../http/api";
export default {
  name: "basicInfo",
  data() {
    return {
      form: {
        t1: "",
        t2: [],
        t3: [],
        t4: [],
        t5: "",
        t6: "",
        id: ""
      },
      token: "",
      url: ""
    };
  },
  created() {
    this.token = this.$store.state.user.token;
    this.headerss = queryCompany().then(res => {
      this.form.t1 = res.data[0].companyInfo;
      if (res.data[0].logoImageUrl) {
        this.form.t2.push(res.data[0].logoImageUrl);
      }
      if (res.data[0].companyImageUrl) {
        this.form.t3.push(res.data[0].companyImageUrl);
      }
	  if (res.data[0].companyPhone) {
	    this.form.t4.push(res.data[0].companyPhone);
	  }
	  this.editor.txt.html(res.data[0].companyWebInfo);
      this.form.t6 = res.data[0].companySketch;
      this.form.id = res.data[0].id;
    });
  },
  mounted() {
    this.editor = new E("#editor");
    this.editor.customConfig.zIndex = 0;
    this.editor.create();
  },
  computed: {
    headers() {
      return {
        token: this.$store.state.user.token
      };
    }
  },
  methods: {
    handleFileChange1(e){
     var that = this;
      let file = e.target.files[0]
      let storeAs = new Date().getTime() + "";
      let client = new OSS({
        accessKeyId: "LTAI4FohfP7q2pjSdjmrCeYg",
        accessKeySecret: "I2N6kpIGgmQmsD23TxGU5yFeISCtyU",
        endpoint: "oss-cn-shenzhen.aliyuncs.com",
        bucket: "xxlpic"
      });
      client
        .multipartUpload(storeAs, file)
        .then(function(result) {
          let str = "http://xxlpic.oss-cn-shenzhen.aliyuncs.com/" + result.name;
          that.form.t2.push(str);
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    handleFileChange2(e){
     var that = this;
      let file = e.target.files[0]
      let storeAs = new Date().getTime() + "";
      let client = new OSS({
        accessKeyId: "LTAI4FohfP7q2pjSdjmrCeYg",
        accessKeySecret: "I2N6kpIGgmQmsD23TxGU5yFeISCtyU",
        endpoint: "oss-cn-shenzhen.aliyuncs.com",
        bucket: "xxlpic"
      });
      client
        .multipartUpload(storeAs, file)
        .then(function(result) {
          let str = "http://xxlpic.oss-cn-shenzhen.aliyuncs.com/" + result.name;
          that.form.t3.push(str);
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    handleFileChange3(e){
     var that = this;
      let file = e.target.files[0]
      let storeAs = new Date().getTime() + "";
      let client = new OSS({
        accessKeyId: "LTAI4FohfP7q2pjSdjmrCeYg",
        accessKeySecret: "I2N6kpIGgmQmsD23TxGU5yFeISCtyU",
        endpoint: "oss-cn-shenzhen.aliyuncs.com",
        bucket: "xxlpic"
      });
      client
        .multipartUpload(storeAs, file)
        .then(function(result) {
          let str = "http://xxlpic.oss-cn-shenzhen.aliyuncs.com/" + result.name;
          that.form.t4.push(str);
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    // 保存
    saveCompany() {
      const data = {
        companyInfo: this.form.t1,
        logoImageUrl: this.form.t2[0],
        companyImageUrl: this.form.t3[0],
        companyPhone: this.form.t4[0],
		    companyWebInfo: this.editor.txt.html(),
        companySketch: this.form.t6,
        id: this.form.id
      };
      if (this.form.t2[0] == undefined) {
        data.logoImageUrl = "";
      }
      if (this.form.t3[0] == undefined) {
        data.companyImageUrl = "";
      }
	  if (this.form.t4[0] == undefined) {
	    data.companyPhone = "";
	  }
      saveCompany(data).then(res => {
        this.$message("保存成功");
        queryCompany().then(res => {});
      });
    },

    onSubmit() {
      this.saveCompany();
    },

    delectImg1() {
      this.form.t2 = [];
    },
    delectImg2() {
      this.form.t3 = [];
    },
	delectImg3() {
	  this.form.t4 = [];
	},

    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>